<template>
  <div class="my-container">
    <!-- 已登录头部 -->
    <div
      v-if="user"
      class="header user-info"
    >
      <div class="base-info">
        <div class="left">
          <van-image
            class="avatar"
            :src="userInfo.photo"
            round
            fit="cover"
          />
          <span class="name">{{ userInfo.name }}</span>
        </div>
        <div class="right">
          <van-button
            size="mini"
            round
          >编辑资料</van-button>
        </div>
      </div>
      <div class="data-stats">
        <div class="data-item">
          <span class="count">{{ userInfo.art_count }}</span>
          <span class="text">头条</span>
        </div>
        <div class="data-item">
          <span class="count">{{ userInfo.follow_count }}</span>
          <span class="text">关注</span>
        </div>
        <div class="data-item">
          <span class="count">{{ userInfo.fans_count }}</span>
          <span class="text">粉丝</span>
        </div>
        <div class="data-item">
          <span class="count">{{ userInfo.like_count }}</span>
          <span class="text">获赞</span>
        </div>
      </div>
    </div>
    <!-- 已登录头部结束 -->

    <!-- 未登录头部 -->
    <div
      v-else
      class="header not-login"
    >
      <div
        class="login-btn"
        @click="$router.push('/login')"
      >
        <img
          class="mobile-img"
          src="~@/assets/mobile.png"
          alt=""
        >
        <span class="text">登录/注册</span>
      </div>
    </div>
    <!-- 未登录头部结束 -->

    <!-- 这部分内容是无论登录与否都显示 -->
    <!-- 宫格导航 -->
    <van-grid
      :column-num="2"
      class="grid-nav"
      clickable
    >
      <van-grid-item class="grid-item">
        <i
          slot="icon"
          class="toutiao toutiao-shoucang"
        ></i>
        <span
          slot="text"
          class="text"
        >收藏</span>
      </van-grid-item>
      <van-grid-item class="grid-item">
        <i
          slot="icon"
          class="toutiao toutiao-lishi"
        ></i>
        <span
          slot="text"
          class="text"
        >历史</span>
      </van-grid-item>
    </van-grid>
    <!-- 宫格导航结束 -->

    <van-cell
      title="消息通知"
      is-link
    />
    <van-cell
      title="小智同学"
      is-link
    />
    <van-cell
      v-if="user"
      title="退出登录"
      class="logout-cell"
      clickable
      @click="onLogout"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user'

export default {
    name: 'MyIndex',
    computed: {
        ...mapState(['user'])
    },
    created () {
        // 如果用户登录了 请求加载用户信息数据
        if (this.user) {
            this.loadUserInfo()
        }
    },
    data () {
        return {
             // 用户信息
             userInfo: {}
        }
    },
    methods: {
        // 退出登录操作
        onLogout () {
            // 弹框组件必须使用this.$dialog来调用
            this.$dialog.confirm({
                title: '确认退出登录吗？'
                })
                .then(() => {
                    // on confirm
                    // 确认退出后 清除state中的user和本地存储的user信息
                    this.$store.commit('setUser', null)
                })
                .catch(() => {
                    // on cancel
            })
        },
        // 加载用户数据
        async loadUserInfo () {
            try {
                const { data } = await getUserInfo()
                console.log(data)
                this.userInfo = data.data
            } catch (error) {
                // 模拟请求成功后返回数据
                const data = {
                    name: '小仙女2.0',
                    photo: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                    is_media: false,
                    intro: 'hhhh',
                    creti: '',
                    art_count: 118340,
                    follow_count: 11,
                    fans_count: 11,
                    like_count: 1045,
                    id: 1
                }

                this.userInfo = data
                this.$toast('获取用户数据失败 请稍后重试')
            }
        }
    }
}
</script>
<style lang="less" scoped>
.my-container {
  .header {
    height: 361px;
    // @别名在vue-cli中是指向src这个根目录的 在css中使用必须加一个~转义
    background: url("~@/assets/banner.png");
    background-size: cover;

    .login-btn {
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .mobile-img {
      width: 132px;
      height: 132px;
    }

    .text {
      margin-top: 15px;
      font-size: 28px;
      color: #fff;
    }
  }

  .user-info {
    .base-info {
      height: 231px;
      padding: 76px 32px 23px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        .avatar {
          width: 132px;
          height: 132px;
          border: 4px solid #fff;
        }
        .name {
          font-size: 30px;
          color: #fff;
          margin-left: 23px;
        }
      }
    }

    .data-stats {
      display: flex;
      align-items: center;
      height: 130px;
      .data-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        color: #fff;
        .count {
          font-size: 36px;
        }
        .text {
          font-size: 23px;
        }
      }
    }
  }

  .grid-nav {
    .grid-item {
      height: 141px;
      i.toutiao {
        font-size: 45px;
      }
      .toutiao-shoucang {
        color: #eb5253;
      }

      .toutiao-lishi {
        color: #ff9b1d;
      }
      span.text {
        font-size: 28px;
        color: #000;
      }
    }
  }

  .logout-cell {
    color: red;
    text-align: center;
  }
}
</style>
